<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
    <el-table :data="tableData" border stripe style="width: 100%;">
        <el-table-column prop="name" label="姓名">
            <template slot-scope="scope">
                <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                <span v-else>{{scope.row.name}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">
                <el-select v-if="scope.row.edit" v-model="scope.row.sex" placeholder="请选择">
                    <el-option label="男" value="1">男</el-option>
                    <el-option label="女" value="2">女</el-option>
                </el-select>
                <span v-else>
              <p v-if="scope.row.sex==1">男</p>
              <p v-if="scope.row.sex==2">女</p>
            </span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button v-if="scope.row.edit" type="text" size="medium" @click="confirmAdd(scope.row)">
                    <i class="el-icon-check" aria-hidden="true"></i>
                </el-button>
                <div v-else>
                    <el-button type="text" size="medium" @click="editData(scope.row)">
                        <i class="el-icon-edit" aria-hidden="true"></i>
                    </el-button>
                    <el-button type="text" size="medium" @click="deleteData(scope.row,scope.$index)">
                        <i class="el-icon-delete" aria-hidden="true"></i>
                    </el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <el-button type="text" @click="addData">添加数据</el-button>
    <el-divider></el-divider>
    <el-button @click="submitData">提交 </el-button>
    </div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                tableData: [],
            }
        },
        methods:{
            newAdd() {
                this.isShowAdd = false;
                this.IsOper = true;
                this.columnWidth = "320";
                this.obj = {
                    timeName: "",
                    startDate: "",
                    startTime: "",
                    hours: "",
                    start: "0"
                };
                this.tableData.push(this.obj);
            },
            addData() {
                this.tableData.push({
                    edit: true,
                });
            },
            //确认添加
            confirmAdd(row) {
                row.edit = false;
            },
            //修改
            editData(row) {
                row.edit = true;
            },
            //删除
            deleteData(row, index) {
                this.tableData.splice(index, 1);
            },
            submitData() {
                alert(JSON.stringify(this.tableData))
            }
        }
    })
</script>
</html>